<template>
  <header>
    <div class="top-bar">
      <div class="logo">
        <a href="/">
          <img src="../images/wangyiyun.png" alt="logo" class="picture" />
        </a>
        <h1>网易云音乐</h1>
      </div>

      <ul class="menu">
        <li><a href="#">发现音乐</a></li>
        <li><a href="#">我的音乐</a></li>
        <li><a href="#">关注</a></li>
        <li><a href="#">商城</a></li>
        <li><a href="#">音乐人</a></li>
        <li><a href="#">下载客户端</a></li>
      </ul>

      <div class="login">
        <input
          type="text"
          placeholder="音乐/视频/电台/用户"
          class="search"
          v-model.lazy="keywords"
          @keyup.enter="getMusicData"
        />
        <a class="center">创作者中心</a>
        <a class="user">登录</a>
      </div>
    </div>
  </header>
</template>
<script setup>
import { ref, nextTick, defineEmits } from 'vue'

const keywords = ref('')
const emit = defineEmits(['search'])
function getMusicData() {
  nextTick(() => {
    emit('search', keywords.value)
  })
}
</script>

<style scoped>
header {
  height: 90px;
  width: 100%;
  background-color: #242424;
}
.top-bar {
  display: flex;
  height: 100%;
  width: 70%;
  margin: 0 auto;
  justify-content: space-between;
  align-items: center;
}
.logo {
  display: flex;
  align-items: center;
  color: #fff;
}
.logo .picture {
  width: 50px;
  height: 50px;
}
.menu {
  display: flex;
  min-width: 500px;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.menu a {
  text-decoration: none;
  color: #fff;
}
.login {
  display: flex;
  gap: 10px;
}
.login .search {
  padding: 8px 8px;
  border-radius: 25px;
  border: none;
  outline: none;
}
.login .center {
  color: #fff;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 1px 10px;
  line-height: 31px;
  font-size: 10px;
  border-radius: 15px;
}
.login .user {
  color: #fff;
  text-decoration: none;
  border: 1px solid #ccc;
  padding: 1px 10px;
  line-height: 31px;
  font-size: 10px;
  border-radius: 15px;
}
</style>
